<template>
  <PageContainer>
    <Header title="好友设置" :is-box-shadow="false">
      <view class="hb-h-22 hb-px-3 hb-flex hb-items-center hb-bg-white">
        <TmImage
          class="hb-flex-shrink-0"
          :src="data?.iconFileUrl"
          :width="128"
          :height="128"
          :round="4"
        />
        <view class="hb-flex-1 hb-h-full hb-ml-3 hb-flex hb-flex-col hb-justify-center">
          <TmText _class="hb-font-bold" :label="data?.botName" :font-size="32" />
          <TmText
            _class="text-overflow-2 hb-mt-2"
            :label="data?.description"
            color="#969799"
            :font-size="24"
          />
        </view>
      </view>
    </Header>
    <view class="hb-p-4">
      <view class="hb-bg-white hb-py-3 hb-px-4 hb-rounded-xl hb-mb-3">
        <TmText _class="hb-font-bold" label="设置标签" :font-size="28" />
        <view class="hb-flex hb-flex-wrap hb-gap-2 hb-my-2">
          <template v-for="item in tagList" :key="item.botLabelId">
            <TmTag
              :margin="[0]"
              :padding="[0]"
              :follow-theme="false"
              closable
              :label="item.label"
              :font-size="24"
              :round="4"
              color="#F2F3F5"
              @close="handleClose(item)"
            />
          </template>
        </view>
        <TmTag
          :margin="[0]"
          :padding="[0]"
          icon="tmicon-plus"
          :follow-theme="false"
          label="添加标签"
          :font-size="24"
          :round="16"
          color="#D0F7FF"
          font-color="primary"
          size="n"
          @click="handleAddTag"
        />
      </view>
      <view class="hb-px-4 hb-rounded-xl hb-bg-white">
        <TmText _class="hb-py-3" label="共享资料设置" color="#969799" :font-size="28" />
        <TmCell
          :margin="[0, 0]"
          :padding="[0, 24]"
          :rightText="`${data?.sharedFilesCount} 个文件`"
          :rightFontSize="28"
          @click="handleSharedFiles('shared')"
        >
          <template #title>
            <TmText _class="hb-font-bold" label="我共享给ta" :font-size="32" />
          </template>
        </TmCell>
        <TmCell
          :margin="[0, 0]"
          :padding="[0, 24]"
          :rightText="`${data?.receivedFilesCount} 个文件`"
          :rightFontSize="28"
          @click="handleSharedFiles('received')"
        >
          <template #title>
            <TmText _class="hb-font-bold" label="ta共享给我" :font-size="32" />
          </template>
        </TmCell>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* friendSetting 好友设置 */
  import { addFriendLabel, deleteFriendLabel, friendDetail } from '@/api/contact';
  import { FriendDetailResult } from '@/api/contact/types';
  import { FriendSetting, FriendSharedFiles } from '@/router/types/modules';

  const data = ref<FriendDetailResult>();
  const tagList = ref<FriendDetailResult['tags']>([]);
  let success: FriendSetting['success'];
  customOnload<'friendSetting'>((op) => {
    success = op.success;
    friendDetail({ id: op.id }).then((res) => {
      tagList.value = res.tags;
      data.value = res;
    });
  });

  const handleClose = (item: FriendDetailResult['tags'][number]) => {
    if (data.value) {
      tagList.value = tagList.value.filter((tag) => tag.botLabelId !== item.botLabelId);
      deleteFriendLabel({ botFriendId: data.value.botFriendMapId, botLabelId: item.botLabelId });
    }
  };

  const handleAddTag = () => {
    navigateTo({
      name: 'selectTags',
      options: {
        selected: tagList.value.map((item) => item.botLabelId),
        success: async (res) => {
          tagList.value = res.map((v) => ({
            ...v,
            botLabelId: v.id,
          }));
          await addFriendLabel({
            botFriendId: data.value!.botFriendMapId,
            botLabelIdList: res.map((item) => item.id),
          });
          success?.();
        },
      },
    });
  };

  const handleSharedFiles = (type: FriendSharedFiles['type']) => {
    navigateTo({
      name: 'friendSharedFiles',
      options: { id: data.value!.botFriendMapId, type },
    });
  };
</script>

<style lang="scss" scoped></style>
